<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <style>
        .container {
            width: 600px;
            height: 600px;
            border: 1px solid;
            display: flex;
            flex-wrap: wrap;
            margin: 10px auto;
        }

        .block {
            width: 33.33%;
            height: 33.33%;
            outline: 1px solid black;
            text-align: center;
            line-height: 200px;
            font-size: 26px;
        }

        #start {
            background-color: skyblue;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="prize1" class="block prize">小米笔记本</div>
    <div id="prize2" class="block prize">iPhoneX</div>
    <div id="prize3" class="block prize">PS4游戏机</div>
    <div id="prize4" class="block prize">谢谢参与</div>
    <div id="start" class="block">开始抽奖</div>
    <div id="prize5" class="block prize">索尼电视机</div>
    <div id="prize6" class="block prize">西门子冰箱</div>
    <div id="prize7" class="block prize">老板抽油烟机</div>
    <div id="prize8" class="block prize">空气净化机</div>
</div>
<script>

    document.getElementById("start").onclick = function () {
        console.log("点击了开始抽奖");
        let prizeArr = [
            document.getElementById("prize1"),
            document.getElementById("prize2"),
            document.getElementById("prize3"),
            document.getElementById("prize4"),
            document.getElementById("prize5"),
            document.getElementById("prize6"),
            document.getElementById("prize7"),
            document.getElementById("prize8"),
        ];
        let luckyNum = Math.floor(Math.random() * prizeArr.length); // 幸运数字
        console.log("幸运数字", luckyNum, "奖品", prizeArr[luckyNum].innerHTML);

        let i = 0;
        let timer = setInterval(function () {
            console.log("i=", i);
            for (let item of prizeArr){
                item.style.backgroundColor = "white";
            }
            let index = i % prizeArr.length;
            console.log("数组下标", index);
            let roundNum = Math.floor(i / prizeArr.length) + 1;
            console.log("第几圈", roundNum);
            prizeArr[index].style.backgroundColor = "blue";
            i++;

            if (roundNum === 3 && index === luckyNum){
                clearInterval(timer);
            }
        }, 100);
    }

</script>
</body>
</html>